<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    shouldAnimate: true,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  var scene = viewer.scene;

  var pathPosition = new Cesium.SampledPositionProperty();
  var entityPath = viewer.entities.add({
    position: pathPosition,
    name: "path",
    path: {
      show: true,
      leadTime: 0,
      trailTime: 60,
      width: 10,
      resolution: 1,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.3,
        taperPower: 0.3,
        color: Cesium.Color.PALEGOLDENROD,
      }),
    },
  });

  var camera = viewer.camera;
  var controller = scene.screenSpaceCameraController;
  var r = 0;
  var center = new Cesium.Cartesian3();

  var hpRoll = new Cesium.HeadingPitchRoll();
  var hpRange = new Cesium.HeadingPitchRange();
  var speed = 100000;
  var deltaRadians = Cesium.Math.toRadians(3.0);

  var position = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    5000.0
  );
  var speedVector = new Cesium.Cartesian3();
  var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
    "north",
    "west"
  );
  const gltf = await Cesium.Model.fromGltfAsync({
    url: "/cesiumData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 56,
  });
  var planePrimitive = scene.primitives.add(gltf);
  console.log("planePrimitive", planePrimitive);
  planePrimitive.readyEvent.addEventListener((model) => {
    console.log("模型加载完成", model);
    // viewer.clock.shouldAnimate = true; // 开启动画
    // Play and loop all animations at half-speed
    model.activeAnimations.addAll({
      multiplier: 0.5,
      loop: Cesium.ModelAnimationLoop.REPEAT,
    });

    // Zoom to model
    // r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    // controller.minimumZoomDistance = r * 0.5;
    // Cesium.Matrix4.multiplyByPoint(
    //   model.modelMatrix,
    //   model.boundingSphere.center,
    //   center
    // );
    // var heading = Cesium.Math.toRadians(230.0);
    // var pitch = Cesium.Math.toRadians(-20.0);
    // hpRange.heading = heading;
    // hpRange.pitch = pitch;
    // hpRange.range = r * 50.0;
    // camera.lookAt(center, hpRange);
  });

  // 更新前一直执行的回调函数
  viewer.scene.preUpdate.addEventListener(function (scene, time) {
    speedVector = Cesium.Cartesian3.multiplyByScalar(
      Cesium.Cartesian3.UNIT_X,
      speed / 10,
      speedVector
    );
    position = Cesium.Matrix4.multiplyByPoint(
      planePrimitive.modelMatrix,
      speedVector,
      position
    );
    pathPosition.addSample(Cesium.JulianDate.now(), position);
    Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform,
      planePrimitive.modelMatrix
    );
  });
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
